import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, TouchableOpacity } from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { colors, sizes } from 'bee/themes';
import { Names, Icon } from 'bee/components/Icon';

// @flow
type Prop = {
  customerName: string,
  sex: sring,
  age: number,
  phoneNo: string,
};

class Customer extends Component<Prop> {
  render() {
    const gender = this.props.sex === '男';
    const iconName = gender ? Names.nan : Names.nv;
    const iconColor = gender ? '#26A5D8' : '#FB7689';
    const iconSize = gender ? sizes.f1 : sizes.f2;
    return (
      <TouchableOpacity>
        <View style={styles.mainContainer}>
          <View style={styles.upperContainer}>
            <Text style={styles.customerName} numberOfLines={1}>
              {this.props.customerName}
            </Text>
            <View style={styles.imageTextContainer}>
              {/* <Image style={styles.icon} /> */}
              <View style={styles.icon}>
                <Icon name={iconName} color={iconColor} size={iconSize} />
              </View>

              <Text style={styles.customerText}>{this.props.sex}</Text>
            </View>
            <Text style={styles.customerText}>{this.props.age}岁</Text>
            <View style={styles.imageTextContainer}>
              {/* <Image style={styles.icon} /> */}
              <View style={styles.icon}>
                <Icon name={Names.dianhua} color="#22AD38" size={sizes.f1} />
              </View>
              <Text style={styles.customerText}>{this.props.phoneNo}</Text>
            </View>
          </View>
          <View style={styles.lowerContainer}>
            <TouchableOpacity>
              <Text style={[styles.customerText, styles.whiteBottom]}>
                拜访记录
              </Text>
            </TouchableOpacity>
            <TouchableOpacity>
              <Text style={[styles.customerText, styles.blueBottom]}>
                制定计划
              </Text>
            </TouchableOpacity>
            <TouchableOpacity>
              <Text style={[styles.customerText, styles.whiteBottom]}>
                一键投保
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    height: px2dp(120),
    backgroundColor: colors.white,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],

    justifyContent: 'center',
  },
  icon: {
    // height: px2dp(22),
    // width: px2dp(20),
    marginRight: px2dp(10),
    // backgroundColor: colors['1002'],
  },
  upperContainer: {
    marginBottom: px2dp(9),
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    // borderWidth: StyleSheet.hairlineWidth,
    // borderColor: colors['1104'],
  },
  customerName: {
    width: px2dp(90),
    fontSize: sizes.f2,
    color: colors['1102'],
  },
  customerText: {
    fontSize: sizes.f1,
    color: colors['1102'],
  },
  imageTextContainer: {
    flexDirection: 'row',
  },
  lowerContainer: {
    marginTop: px2dp(8),
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    // borderWidth: StyleSheet.hairlineWidth,
    // borderColor: colors['1104'],
  },
  whiteBottom: {
    marginRight: px2dp(30),
    paddingHorizontal: px2dp(17),
    paddingVertical: px2dp(6),
    // fontSize: sizes.f1,
    // color: colors['1102'],
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
    borderRadius: px2dp(25),
  },
  blueBottom: {
    marginRight: px2dp(30),
    paddingHorizontal: px2dp(17),
    paddingVertical: px2dp(6),
    fontSize: sizes.f1,
    color: colors.white,
    backgroundColor: colors['1001'],
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
    borderRadius: px2dp(25),
    overflow: 'hidden',
  },
});

export default Customer;
